import React, {Component} from 'react';
import {Button, List, InputItem, WhiteSpace} from 'antd-mobile';
import './PublishMovieReview.scss'
import {DoubleLeftOutlined} from "@ant-design/icons";
import http from "../util/http";

class PublishMovieReview extends Component {
    constructor(props) {
        super(props);
        this.state = {
            size: 'large',
            score: "",
            content:""
        };
    }


    componentDidMount() {
        console.log(this.props.location.state)
    }

    handleSizeChange = e => {
        this.setState({size: e.target.value});
    };
    handleClick = () => {
        this.inputRef.focus();
    };
    onChange = (value) => {
        this.setState({
            score: value
        });
    }


    Publish = (event) => {
        const collectInfo = {
            movieId:this.props.location.state.movieId,
            vipId:this.props.location.state.vipId,
            score:this.state.score,
            content:this.state.content
        }
        http.post(`api/comment/release`, collectInfo).then(({data}) => {
            console.log(data)
            if (data.code === 200) {
                this.props.history.goBack()
            } else {
                alert(data.msg)
            }
        })
    };
    onChangecontent(e){
        this.setState({
            content:e.target.value
        })
    }
    render() {
        const {size} = this.state;

        return (
            <div className={"pubReview"}>
                <div className={"header"}>
                    <div onClick={() => this.props.history.goBack()}><DoubleLeftOutlined/>返回</div>

                </div>
                <div className={"pubReview-main"}>
                    <div className={"movieName"}>
                        <h3>{this.props.location.state.movieName}</h3>
                    </div>
                    <div className={'score'}>
                        <InputItem
                            clear
                            placeholder="请输入您的评分"
                            ref={el => this.autoFocusInst = el}
                            onChange={this.onChange}
                        >评分</InputItem>
                    </div>
                    <div>
                        <textarea onChange={this.onChangecontent.bind(this)} value={this.state.content} className={'text-area'} cols={50} rows={10}  placeholder="大家都在问：剧情怎么样，画面好吗，演技如何？" count={100}/>
                    </div>
                    <Button onClick={this.Publish} type="primary" shape="round" size={size}>
                        发布
                    </Button>
                </div>
            </div>

        );
    }
}


export default PublishMovieReview;
